<!--template_01 模板-->
<template>
  <!-- 信息录入 -->
  <div class="box boxHtml">
    <el-form
      class="addInfor"
      label-width="100px"
      size="small"
      :inline="true"
      ref="inforForm"
      :model="form"
      :rules="formRules"
    >
      <div class="form_wrap clearfix">
        <el-form-item
          label="借款人姓名:"
          prop="basicBorrowerName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerName"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号码:"
          prop="basicBorrowerCard"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerCard"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话:"
          prop="basicBorrowerPhone"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerPhone"></el-input>
        </el-form-item>
        <el-form-item
          label="工作单位:"
          prop="basicBorrowerWork"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerWork"></el-input>
        </el-form-item>
        <el-form-item
          label="婚姻状况"
          prop="basicBorrowerMarriage"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select v-model="form.basicBorrowerMarriage">
            <el-option
              v-for="item in Marriage"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="form_wrap clearfix" v-if="showMate">
        <el-form-item
          label="配偶姓名:"
          prop="basicBorrowerMateName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerMateName"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号码:"
          prop="basicBorrowerMateCard"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerMateCard"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话:"
          prop="basicBorrowerMatePhone"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicBorrowerMatePhone"></el-input>
        </el-form-item>
      </div>
      <div class="form_wrap clearfix">
        <el-form-item
          label="抵押人姓名:"
          prop="pledgeName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeName"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号码:"
          prop="pledgeCard"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeCard"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话:"
          prop="pledgePhone"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgePhone"></el-input>
        </el-form-item>
        <el-form-item
          label="抵押共有人:"
          prop="pledgeMateName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeMateName"></el-input>
        </el-form-item>
        <el-form-item
          label="身份证号码:"
          prop="pledgeMateCard"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeMateCard"></el-input>
        </el-form-item>
        <el-form-item
          label="联系电话:"
          prop="pledgeMatePhone"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeMatePhone"></el-input>
        </el-form-item>
      </div>
      <div class="form_wrap clearfix">
        <el-form-item
          label="抵押物地址:"
          prop="pledgeHouseAddress"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeHouseAddress" maxlength="50"></el-input>
        </el-form-item>
        <el-form-item
          label="请选择省"
          prop="provinceName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select
            v-model="form.provinceName"
            @change="provinceFun"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provinceData"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请选择市"
          prop="cityName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select
            v-model="form.cityName"
            placeholder="请选择"
            :no-data-text="cityText"
            @change="cityFun"
          >
            <el-option
              v-for="item in cityData"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请选择区"
          prop="areaName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select
            v-model="form.areaName"
            placeholder="请选择"
            :no-data-text="areaText"
            @change="areaFun"
          >
            <el-option
              v-for="item in areaData"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="抵押地址二:"
          prop="pledgeHouseAddressTwo"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input
            v-model="form.pledgeHouseAddressTwo"
            maxlength="50"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="请选择省"
          prop="provinceTwoName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select
            v-model="form.provinceTwoName"
            @change="provinceFunTwo"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provinceData"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请选择市"
          prop="cityTwoName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select
            v-model="form.cityTwoName"
            placeholder="请选择"
            :no-data-text="cityText"
            @change="cityFunTwo"
          >
            <el-option
              v-for="item in cityDataTwo"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="请选择区"
          prop="areaTwoName"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select
            v-model="form.areaTwoName"
            placeholder="请选择"
            :no-data-text="areaText"
            @change="areaFunTwo"
          >
            <el-option
              v-for="item in areaDataTwo"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="申请金额:"
          prop="basicLoansMoney"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicLoansMoney">
            <template slot="append">（万元）</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="还款期限:"
          prop="basicLoansMonths"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.basicLoansMonths">
            <template slot="append">（个月）</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="还款方式:"
          prop="landNature"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-select v-model="form.approveRepaymentMode" placeholder="请选择">
            <el-option
              v-for="item in approveSelect"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
          <el-form-item
          label="产权证号:"
          prop=" pledgeHouseNumber"
          class="input_wrap"
          :style="{ width: width }"
        >
          <el-input v-model="form.pledgeHouseNumber"> </el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getDistrict } from "../../assets/js/api";
export default {
  name: "Information",
  created() {
    //获取省市区
    this.provinceSelect(1);
  },
  props: {
    width: { type: String, default: "30%" },
    formData: { type: Object },
  },
  data() {
    return {
      provinceData: [], //省
      cityData: [], //市
      areaData: [], //区
      cityDataTwo: [], //市
      areaDataTwo: [], //区
      cityText: "请先选择省",
      areaText: "请先选择市",
      showTwo: false,
      isValid: false,
      form: {
        basicBorrowerName: null,
        basicBorrowerCard: null,
        basicBorrowerPhone: null,
        basicBorrowerWork: null,
        basicBorrowerMarriage: "未婚",

        basicBorrowerMateName: null,
        basicBorrowerMateCard: null,
        basicBorrowerMatePhone: null,

        pledgeName: null,
        pledgeCard: null,
        pledgePhone: null,
        pledgeMateName: null,
        pledgeMateCard: null,
        pledgeMatePhone: null,

        pledgeHouseAddress: null,
        province: null,
        city: null,
        area: null,
        provinceName: null,
        cityName: null,
        areaName: null,
        pledgeHouseAddressTwo: null,
        provinceTwo: null,
        cityTwo: null,
        areaTwo: null,
        provinceTwoName: null,
        cityTwoName: null,
        areaTwoName: null,
        basicLoansMoney: null,
        basicLoansMonths: null,
        pledgeHouseNumber:null
      },
      //婚姻选项
      Marriage: [
        { value: "未婚", label: "未婚" },
        { value: "已婚", label: "已婚" },
        { value: "离异", label: "离异" },
      ],
      //房屋类型
      approveSelect: [
        { value: "先息后本", label: "先息后本" },
        { value: "等额本息", label: "等额本息" },
        { value: "等额本金", label: "等额本金" },
        { value: "等额等息", label: "等额等息" },
      ],
      formRules: {
        basicBorrowerName: [
          {
            type: "string",
            required: true,
            message: "请输入借款人姓名",
            trigger: "blur",
          },
        ],
        basicBorrowerCard: [
          { required: true, message: "请填写身份证号码", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "请填写正确的身份证号码",
            trigger: "blur",
          },
        ],
        basicBorrowerPhone: [
          { required: true, message: "请填写手机号", trigger: "blur" },
          {
            pattern: /^1[345789]\d{9}$/,
            message: "请填写正确的手机号码",
            trigger: "blur",
          },
        ],

        // basicBorrowerMateName: [
        //   {
        //     type: "string",
        //     required: true,
        //     message: "请输入配偶姓名",
        //     trigger: "blur"
        //   }
        // ],
        // basicBorrowerMateCard: [
        //   { required: true, message: "请填写身份证号码", trigger: "blur" },
        //   {
        //     pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        //     message: "请填写正确的身份证号码",
        //     trigger: "blur"
        //   }
        // ],
        // basicBorrowerMatePhone: [
        //   { required: true, message: "请填写手机号", trigger: "blur" },
        //   {
        //     pattern: /^1[345789]\d{9}$/,
        //     message: "请填写正确的手机号码",
        //     trigger: "blur"
        //   }
        // ],
        pledgeHouseAddress: [
          {
            type: "string",
            required: true,
            message: "请输入抵押物地址",
            trigger: "blur",
          },
          { pattern: /[^\s]/, message: "不允许输入空格等特殊符号" },
        ],
        provinceName: {
          required: true,
          message: "请选择省份",
          trigger: ["blur", "change"],
        },
        cityName: {
          required: true,
          message: "请选择市",
          trigger: ["blur", "change"],
        },
        areaName: {
          required: true,
          message: "请选择正确的区",
          trigger: ["blur", "change"],
        },
      },
    };
  },
  watch: {
    formData: {
      handler(newVal) {
        let thisObj = this;
        if (newVal) {
          if (newVal.province) {
            this.getProvince(newVal.province);
          }
          if (newVal.provinceTwo) {
            this.getProvinceTwo(newVal.provinceTwo);
          }
          thisObj.form = JSON.parse(JSON.stringify(newVal));
          thisObj.form = JSON.parse(JSON.stringify(newVal));
          if (newVal.pledgeHouseAddressTwo) {
            this.showTwo = true;
          }
        }
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {
    //是否婚配
    showMate: function () {
      if (this.form.basicBorrowerMarriage != "已婚") {
        return false;
      } else {
        return true;
      }
    },
  },
  methods: {
    //验证表单
    validateForm() {
      this.$refs.inforForm.validate((valid) => {
        if (valid) {
          this.isValid = true;
        } else {
          this.isValid = false;
        }
      });
    },
    // 获取省数据
    provinceSelect(val) {
      getDistrict(val).then((res) => {
        if (res.code == 200) {
          this.provinceData = res.data;
        }
      });
    },
    // 第一个抵押物获取选择省的id
    provinceFun(val) {
      this.form.province = val;
      getDistrict(val).then((res) => {
        if (res.data.length == 0) {
          (this.form.cityName = " "),
            (this.form.areaName = " "),
            (this.cityData = []),
            (this.areaData = []),
            (this.cityText = "暂无数据");
          this.areaText = "暂无数据";
          return;
        }
        this.cityData = res.data;
        this.form.city = res.data[0].id;
        this.form.cityName = res.data[0].value;
        getDistrict(res.data[0].id).then((resd) => {
          this.areaData = resd.data;
          this.form.area = resd.data[0].id;
          this.form.areaName = resd.data[0].value;
        });
      });
    },
    getProvince(val) {
      this.form.province = val;
      getDistrict(val).then((res) => {
        if (res.data.length == 0) {
          (this.form.cityName = " "),
            (this.form.areaName = " "),
            (this.cityText = "暂无数据");
          this.areaText = "暂无数据";
          return;
        }
        this.cityData = res.data;
        getDistrict(res.data[0].id).then((resd) => {
          this.areaData = resd.data;
        });
      });
    },
    // 获取选择市的id
    cityFun(val) {
      this.form.city = val;
      getDistrict(val).then((res) => {
        if (res.code == 200) {
          this.areaData = res.data;
          this.form.area = res.data[0].id;
          this.form.areaName = res.data[0].value;
          if (this.areaData.length == 0) {
            this.areaText = "暂无数据";
          }
        }
      });
    },
    areaFun(val) {
      this.form.area = val;
    },

    //第二个抵押物获取选择省的id
    provinceFunTwo(val) {
      getDistrict(val).then((res) => {
        this.form.provinceTwo = val;
        if (res.data.length == 0) {
          (this.form.cityTwoName = " "),
            (this.form.areaTwoName = " "),
            (this.cityText = "暂无数据");
          this.areaText = "暂无数据";
          return;
        }
        this.cityDataTwo = res.data;
        this.form.cityTwo = res.data[0].id;
        this.form.cityTwoName = res.data[0].value;
        getDistrict(res.data[0].id).then((resd) => {
          this.areaDataTwo = resd.data;
          this.form.areaTwo = resd.data[0].id;
          this.form.areaTwoName = resd.data[0].value;
        });
      });
    },
    getProvinceTwo(val) {
      this.form.provinceTwo = val;
      getDistrict(val).then((res) => {
        if (res.data.length == 0) {
          (this.form.cityTwoName = " "),
            (this.form.areaTwoName = " "),
            (this.cityText = "暂无数据");
          this.areaText = "暂无数据";
          return;
        }
        this.cityDataTwo = res.data;
        getDistrict(res.data[0].id).then((resd) => {
          this.areaDataTwo = resd.data;
        });
      });
    },
    // 获取选择市的id
    cityFunTwo(val) {
      (this.form.cityTwo = val),
        getDistrict(val).then((res) => {
          if (res.code == 200) {
            this.areaDataTwo = res.data;
            this.form.areaTwo = res.data[0].id;
            this.form.areaTwoName = res.data[0].value;
            if (res.data.length == 0) {
              this.areaText = "暂无数据";
            }
          }
        });
    },
    areaFunTwo(val) {
      this.form.areaTwo = val;
    },
  },
};
</script>
<style scoped type="less">
.box {
  overflow: hidden;
}
.form_wrap {
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px 20px 0;
  margin-top: 20px;
}
.input_wrap {
  width: 25%;
  margin-right: unset;
  display: flex;
  float: left;
  height: 33px;
}
.input_wrap ::v-deep .el-form-item__content {
  flex: 1;
}
.input_wrap ::v-deep .el-select {
  width: 100%;
  line-height: 30px;
}
.input_wrap ::v-deep .el-input__inner {
  line-height: 30px;
  box-sizing: border-box;
}
</style>
